<!DOCTYPE HTML>
<html>
<head>
  <title>Accept header</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<script>

// All the requests are sent to test_accept_header.sjs which will return
// different content based on the queryString. When the queryString is 'get',
// test_accept_header.sjs returns a JSON object with the latest request and its
// accept header value.

function test_last_request_and_continue(query, expected) {
  fetch("test_accept_header.sjs?get").then(r => r.json()).then(json => {
    is(json.type, query, "Expected: " + query);
    is(json.accept, expected, "Accept header: " + expected);
    next();
  });
}

function test_iframe() {
  let observer = new PerformanceObserver(function(list, obj) {
    obj.disconnect();

    list.getEntries().forEach(entry => {
      if (entry.name.endsWith("test_accept_header.sjs?iframe")) {
        obj.disconnect();
        test_last_request_and_continue("iframe", "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");
      }
    });
  });

  observer.observe({entryTypes: ["resource"]});

  let ifr = document.createElement("iframe");
  ifr.src = "test_accept_header.sjs?iframe";
  document.body.appendChild(ifr);
}

function test_image() {
  let i = new Image();
  i.src = "test_accept_header.sjs?image";
  i.onload = function() {
    // Fetch spec says we should have: "image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5"
    test_last_request_and_continue("image", "image/webp,image/png,image/*;q=0.8,*/*;q=0.5");
  }
}

function test_style() {
  let observer = new PerformanceObserver(function(list, obj) {
    obj.disconnect();

    list.getEntries().forEach(entry => {
      if (entry.name.endsWith("test_accept_header.sjs?style")) {
        obj.disconnect();
        test_last_request_and_continue("style", "text/css,*/*;q=0.1");
      }
    });
  });

  observer.observe({entryTypes: ["resource"]});

  let head = document.getElementsByTagName("head")[0];
  let link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = "test_accept_header.sjs?style";
  head.appendChild(link);
}

function test_worker() {
  let w = new Worker("test_accept_header.sjs?worker");
  w.onmessage = function() {
    test_last_request_and_continue("worker", "*/*");
  }
}

let tests = [
  test_iframe,
  test_image,
  test_style,
  test_worker,
];

function next() {
  if (tests.length == 0) {
    SimpleTest.finish();
    return;
  }

  let test = tests.shift();
  test();
}

SimpleTest.waitForExplicitFinish();

SpecialPowers.pushPrefEnv({ "set": [
  [ "dom.enable_performance_observer", true ]
]}, next);

</script>
</body>
</html> 
